<template>
  <div class="news">
    <!-- 顶部导航 -->
    <news-nav :currentNav="currentNav" @changNav="changNav"></news-nav>
    <!-- 下方详情 -->
    <news-list :noMoreData="noMoreData" :currentNav="currentNav" :mountainList="mountainList"></news-list>
  </div>
</template>

<script>
import NewsNav from "./child/NewsNav";
// 数据请求
import { getNearbyMountain } from "api/news";
import { throtTling } from "utils/throttling.js";
import { getIndexList, getSignPackage } from "api/home";
import { getScrollTop, getScrollHeight, getWindowHeight } from "utils/scroll";
export default {
  name: "News",
  components: {
    NewsNav,
  },
  data() {
    return {
      currentNav: "1",
      mountainList: [],
      longitude: null,
      latitude: null,
      winUrl: "",
      page: 1,
      limit: 5,
      // 没有更多数据了
      noMoreData: false,
    };
  },
  mounted() {
    this.winUrl = location.href;
    // 注册全局下拉事件
    this.$nextTick(() => {
      window.addEventListener("scroll", this.menu);
    });
    // 获取全部数据列表
    this.getIndexList();
  },
  methods: {
    // 获取全部数据列表
    getIndexList() {
      getIndexList(this.page, this.limit).then((res) => {
        if (res.code == 200) {
          this.mountainList.push(...res.data.data);
        } else {
          this.noMoreData = true;
        }
      });
    },
    getNearbyMountains() {
      let that = this;
      if (that.longitude) {
        getNearbyMountain(that.longitude, that.latitude).then((res) => {
          if (res.code == 200) {
            that.mountainList = res.data;
          }
        });
      }
      // location.href
      getSignPackage(this.winUrl).then((res) => {
        let that = this;
        if (res.code == 200) {
          // 配置 JS-SDK
          that.wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: res.data.signPackage.appId, // 必填，公众号的唯一标识
            timestamp: res.data.signPackage.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.signPackage.nonceStr, // 必填，生成签名的随机串
            signature: res.data.signPackage.signature, // 必填，签名
            jsApiList: ["scanQRCode", "getLocation"], // 必填，需要使用的JS接口列表
          });
          that.wx.ready(() => {
            that.wx.getLocation({
              type: "gcj02",
              success: function (res) {
                // latitude;  纬度，浮点数，范围为90 ~ -90
                // longitude;  经度，浮点数，范围为180 ~ -180。
                let lat = res.latitude;
                let lng = res.longitude;
                let x_PI = (3.14159265358979324 * 3000.0) / 180.0;
                let z =
                  Math.sqrt(lng * lng + lat * lat) +
                  0.00002 * Math.sin(lat * x_PI);
                let theta =
                  Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * x_PI);
                that.longitude = z * Math.cos(theta) + 0.0065;
                that.latitude = z * Math.sin(theta) + 0.006; 
                getNearbyMountain(that.longitude, that.latitude).then((res) => {
                  if (res.code == 200) {
                    that.mountainList = res.data;
                  }
                });
              },
              fail: function (err) {  
                  console.log("failres=" + JSON.stringify(err));  
              }  
            });
          });
        }
      });
    },
    changNav(index) {
      let that = this;
      that.page = 1;
      that.currentNav = index;
      that.noMoreData = false;
      that.mountainList = [];
      if (index == 2) {
        that.getNearbyMountains();
      } else {
        that.getIndexList();
      }
    },
    menu: throtTling(function () {
      if (!this.noMoreData) {
        // 此时还有剩余数据未加载完
        let scroll = getScrollTop() + getWindowHeight() - getScrollHeight();
        if (scroll > -400) {
          //400：距离底部多少像素开始触发
          if (this.currentNav == 1) {
            this.page += 1;
            this.getIndexList();
          }
        }
      }
    }, 600),
  },
  beforeRouteEnter(to, from, next) {
    let u = navigator.userAgent;
    let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    // XXX: 修复iOS版微信HTML5 History兼容性问题
    if (isiOS && to.path !== location.pathname) {
      // 此处不可使用location.replace
      location.replace(to.fullPath);
    } else {
      next();
    } 
  },
  beforeDestroy() {
    this.$bus.$off("changezb");
  },
};
</script>

<style lang="less" scoped>
</style>